<template>
  <div>
    <el-button @click="click1()">消息提示成功(h)</el-button>
    <el-button @click="click2()">消息提示失败</el-button>
    <el-button @click="click3()">消息提示确定/取消</el-button>
    <el-button @click="click4()">消息提示确定/取消(HTML)</el-button>
  </div>
</template>
<script setup lang="ts">
import { h } from 'vue';
import { useMessage } from 'wb-platform-library'
  const message = useMessage()
  const click1 = () => {
    message.successMsg(h('div', { style: 'color:red;' }, '我是消息'))
  }
  const click2 = () => {
    message.errorMsg('123')
  }
  const click3 = () => {
    message.confirm({
      title: '123',
      message: h('div', { style: 'color:green;' }, '我是消息'),
      cancelButtonText: '取消按钮1',
      confirmButtonText: '确定按钮1',
      submitCallBack: () => {
        alert('点击确定')
      },
      cleanCallBack: () => {
        alert('点击取消')
      },
    })
  }
  const click4 = () => {
    message.confirm({
      title: '123',
      message: '<strong>proxy is <i>HTML</i> string</strong>',
      cancelButtonText: '取消按钮1',
      confirmButtonText: '确定按钮1',
      options: { dangerouslyUseHTMLString: true },
    })
  }
</script>
